<template>
  <div class="app-container">
    <a-space direction="vertical" :size="0" fill>
      <a-space direction="vertical" :size="0" fill>
        <div class="space-unit">
          <PublicOpinion />
        </div>
        <div style="margin-top: 80px">
          <a-grid :cols="24" :col-gap="16" :row-gap="8">
            <a-grid-item
                :span="{ xs: 25, sm: 24, md: 24, lg: 24, xl: 8, xxl: 8 }">
              <PopularAuthor />
            </a-grid-item>
          </a-grid>
        </div>
        <div style="margin-left: 500px;margin-top: -410px">
          <a-grid :cols="24" :col-gap="38" :row-gap="34">
            <a-grid-item
                :span="{ xs: 25, sm: 24, md: 24, lg: 24, xl: 16, xxl: 16 }">
              <ContentPublishRatio />
            </a-grid-item>
          </a-grid>
        </div>
      </a-space>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import PublicOpinion from './components/public-opinion.vue';
import ContentPublishRatio from './components/content-publish-ratio.vue';
import PopularAuthor from './components/popular-author.vue';
</script>

<script lang="ts">
export default {
  name: 'DataAnalysis',
};
</script>

<style scoped lang="less">
.space-unit {
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14px;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
</style>
